<template>
  <div class="player" v-if="info !=''">
    <div class="left">
      <img class="disc" playing :class="{playing:playing}" src="../assets/img/disc.png" alt />
      <img class="cover" playing :class="{playing:playing}" :src="info.al.picUrl" alt />
    </div>
    <div class="right">
      <div class="title">
        <img src="../assets/img/tag.png" alt />
        <span>{{info.name}}</span>
      </div>
      <div class="singer">
        歌手:
        <span>{{info.ar | filterArr}}</span>
      </div>
      <div class="album">
        所属专辑:
        <span>{{info.al.name}}</span>
      </div>
      <audio @play="playing = true" @pause="playing = false" class="audio" controls :src="musicUrl"></audio>
      <ul class="lyric-container">
        <li class="lyric" v-for="(item, index) in lrc" :key="index">{{item.split(']')[1]}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      musicUrl: "",
      info: "",
      lrc: [],
      playing: false
    };
  },
  filters: {
    filterArr(arr) {
      let _arr = arr.map(item => {
        return item.name;
      });
      return _arr.join("/");
    }
  },
  created() {
    //   获取音乐url
    axios({
      url: "http://183.237.67.218:3000/song/url?id=" + this.$route.query.id
    }).then(res => {
      // window.console.log(res);
      this.musicUrl = res.data.data[0].url;
    });
    // 获取歌曲详情
    axios({
      url: "http://183.237.67.218:3000/song/detail?ids=" + this.$route.query.id
    }).then(res => {
      // window.console.log(res);
      this.info = res.data.songs[0];
    });
    // 获取歌词
    axios({
      url: "http://183.237.67.218:3000/lyric?id=" + this.$route.query.id
    }).then(res => {
      this.lrc = res.data.lrc.lyric.split("\n");
      window.console.log(this.lrc);
    });
  }
};
</script>

<style>
.playing {
  animation: move 2s infinite linear;
}
@keyframes move {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
</style>